﻿@model DirectPaymentModel
@{ ViewBag.Title = "Enter Payment Information"; }

<p>Enter your payment information below. You will then be given a chance to review the order before it is finalized.</p>
@Html.ValidationSummary(true, "Please correct the errors and try again.")

@using (Html.BeginForm())
{
    <div>
        <fieldset>
            <legend>Payment Information</legend>

            <div class="editor-label">
                @Html.LabelForWithReq(m => m.FirstName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.FirstName)
                @Html.ValidationMessageFor(m => m.FirstName)
            </div>

            <div class="editor-label">
                @Html.LabelForWithReq(m => m.LastName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.LastName)
                @Html.ValidationMessageFor(m => m.LastName)
            </div>

            <div class="editor-label">
                @Html.LabelForWithReq(m => m.CardType)
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(m => m.CardType, new List<SelectListItem> { 
                    new SelectListItem { Text = "Visa", Value = "Visa", Selected = true },
                    new SelectListItem { Text = "MasterCard", Value = "MasterCard" },
                    new SelectListItem { Text = "Discover", Value = "Discover" },
                    new SelectListItem { Text = "American Express", Value = "Amex" }
                })
            </div>

            <div class="editor-label">
                @Html.LabelForWithReq(m => m.CardNumber)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.CardNumber, new { maxlength = "19" })
                @Html.ValidationMessageFor(m => m.CardNumber)
            </div>

            <div class="editor-label">
                <label>Expiration Date</label>
            </div>
            <div class="editor-field">
                @Html.MonthDropDownFor(m => m.ExpirationMonth) @Html.YearRangeDropDownFor(m => m.ExpirationYear, 10)
            </div>

            <div class="editor-label">
                @Html.LabelForWithReq(m => m.CardVerificationNumber)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.CardVerificationNumber, new { @class = "cvv2", maxlength = "4", size = "4" })
                @Html.ValidationMessageFor(m => m.CardVerificationNumber)
            </div>

            <h4>Billing Address</h4>

            <div class="editor-label">
                @Html.LabelForWithReq(m => m.BillingAddress1)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.BillingAddress1)
                @Html.ValidationMessageFor(m => m.BillingAddress1)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.BillingAddress2) <span class="note">(optional)</span>
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.BillingAddress2) 
                @Html.ValidationMessageFor(m => m.BillingAddress2)
            </div>

            <div class="horiz">
                <div class="item">
                    @Html.LabelForWithReq(m => m.City)
                    @Html.TextBoxFor(m => m.City)
                </div>
                <div class="item">
                    @Html.LabelForWithReq(m => m.State)
                    @Html.StateDropDownFor(m => m.State)
                </div>
                <div class="item">
                    @Html.LabelForWithReq(m => m.ZipCode)
                    @Html.TextBoxFor(m => m.ZipCode)
                </div>
                <div class="item val" style="width: 270px;">
                    @Html.ValidationMessageFor(m => m.City)
                    @Html.ValidationMessageFor(m => m.State)
                    @Html.ValidationMessageFor(m => m.ZipCode)
                </div>
            </div>

            <div class="editor-label">
                @Html.LabelForWithReq(m => m.Country)
            </div>
            <div class="editor-field">
                @Html.CountryDropDownFor(m => m.Country)
                @Html.ValidationMessageFor(m => m.Country)
            </div>

            <p class="buttons">
                <input type="submit" value="Continue" /> <span class="note">(You will be asked to confirm at the next step)</span>
            </p>
        </fieldset>
    </div>
}